<template>
  <div id="mapChart" ref="mapChart" style="height:500px;margin-bottom:16px;"></div>
</template>

<script>
import echarts from 'echarts'
import taiyuan from '@/assets/json/taiyuan.json'
export default {
  name: 'MapChart',
  props: {
    target: String,
    targetArea: String
  },
  data () {
    return {
      mychart: {},
      geoCoordMap: {},
      mapData: [],
      option: {},
      scatterOption: {}
    }
  },
  created () {
    if (window.location.hash.startsWith('#/supplierManagement')) {
      console.log('我是供应商首页')
      this.scatterOption = {
        name: 'light',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: this.convertData(this.mapData),
        symbol: 'pin', // 气泡
        symbolSize: function (val) {
          return 40
        },
        label: {
          normal: {
            formatter: '{@[2]}',
            // position: 'right',
            color: '#fff',
            fontSize: 9,
            show: true
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: '#F62157'
            // color: colors[colorIndex][n]
          }
        }
      }
    }
    this.getAreaData()
  },
  mounted () {
    this.initMap()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  watch: {
    target (newVal, oldVal) {
      this.getAreaData()
      this.option.series[0].data = this.convertData(this.mapData)
      this.mychart.setOption(this.option)
    },
    targetArea (newVal, oldVal) {
      this.option.series[1].data[0].name = newVal
      this.mychart.setOption(this.option)
    }
  },
  methods: {
    initMap () {
      var name = '太原市'
      console.log(taiyuan)
      echarts.registerMap(name, taiyuan)
      this.mychart = echarts.init(this.$refs.mapChart)
      this.mychart.on('click', params => {
        this.mapClick(params.name)
      })
      this.option = {
        backgroundColor: 'rgba(12,16,61,0.8)',
        geo: {
          show: true,
          map: '太原市',
          roam: false,
          zoom: 1,
          label: {
            emphasis: {
              show: false
            }
          },
          scaleLimit: {
            min: 1,
            max: 1
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(128, 217, 248, 1)',
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          }
        },
        series: [
          // 文字和标志
          {
            name: 'light',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.convertData(this.mapData),
            symbol: 'pin', // 气泡
            symbolSize: function (val) {
              return 60
            },
            label: {
              normal: {
                formatter: '{@[2]}',
                // position: 'right',
                color: '#fff',
                fontSize: 12,
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#F62157',
                opacity: window.location.hash.startsWith('#/supplierManagement') ? 1 : 0 // 只有供应商首页才展示气泡
                // color: colors[colorIndex][n]
              }
            }
          },
          // 地图
          {
            type: 'map',
            mapType: name,
            zoom: 1,
            label: {
              normal: {
                show: true,
                color: '#fff'
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgb(24,154,183)',
                borderWidth: 2,
                areaColor: 'rgb(21,51,117)'
              },
              emphasis: {
                areaColor: '#389BB7',
                borderWidth: 0
              }
            },
            selectedMode: window.location.hash.startsWith('#/supplierManagement') ? '' : 'multiple',
            animation: false,
            data: [{ name: this.targetArea, selected: true }]
            // animationDurationUpdate: 1000,
            // animationEasingUpdate: 'quinticInOut'
          }
        ]
      }
      this.mychart.setOption(this.option)
    },
    convertData (data) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name]
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          })
        }
      }
      console.log(res)
      return res
    },
    randomNum (minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10)
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
        default:
          return 0
      }
    },
    getAreaData () {
      this.geoCoordMap = {}
      this.mapData = []
      taiyuan.features.forEach(ele => {
        this.geoCoordMap[ele.properties.name] = [ele.properties.center[0], ele.properties.center[1]]
        this.mapData.push({
          name: ele.properties.name,
          value: this.randomNum(100, 300)
        })
      })
    },
    mapClick (name) {
      console.log(name)
      this.$emit('mapChange', name)
    }
  }
}
</script>

<style lang="less" scoped>
#mapChart {
  background: url('~@/assets/images/earth.png');
  background-size: cover;
}
</style>
